<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-left">
        <div class="welcome-text">
          <h2>欢迎使用</h2>
          <h1>邻里优选</h1>
          <p>便捷、安全、优质的社区团购平台</p>
        </div>
      </div>
      <div class="login-right">
        <div class="login-form-container">
          <h2>用户登录</h2>
          <p class="sub-title">登录您的账号，开始使用系统</p>
          
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <el-form-item prop="username">
              <el-input 
                v-model="loginForm.username" 
                prefix-icon="el-icon-user" 
                placeholder="请输入用户名/手机号">
              </el-input>
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input 
                v-model="loginForm.password" 
                prefix-icon="el-icon-lock" 
                type="password" 
                placeholder="请输入密码">
              </el-input>
            </el-form-item>
            
            <el-form-item>
              <div class="role-selector">
                <el-radio v-model="loginForm.role" label="admin">管理员登录</el-radio>
                <el-radio v-model="loginForm.role" label="leader">团长登录</el-radio>
              </div>
              <div class="role-tip">
                <el-alert
                  v-if="loginForm.role === 'admin'"
                  title="请确认您是管理员身份"
                  type="info"
                  :closable="false"
                  show-icon>
                </el-alert>
                <el-alert
                  v-else
                  title="请确认您是团长身份"
                  type="info"
                  :closable="false"
                  show-icon>
                </el-alert>
              </div>
            </el-form-item>
            
            <el-form-item>
              <el-button 
                type="primary" 
                class="login-button" 
                :loading="loading" 
                @click="handleLogin">
                登 录
              </el-button>
            </el-form-item>
            
            <div class="login-tips">
              <span>还没有账号？</span>
              <router-link to="/register">立即注册</router-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user'

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        role: 'admin' // 默认管理员登录
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          login(this.loginForm).then(res => {
            // 保存用户信息和token到本地存储
            localStorage.setItem('token', res.token)
            localStorage.setItem('userId', res.id)
            localStorage.setItem('role', res.role)
            
            // 如果是团长角色，保存团长ID
            if (res.role === 'leader') {
              localStorage.setItem('leaderId', res.leaderId || res.id)
            }
            
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            
            // 使用window.location方式跳转，完全刷新页面，避免路由问题
            setTimeout(() => {
              const path = res.role === 'admin' ? '/admin/dashboard' : '/leader/dashboard'
              window.location.href = path
            }, 500)
          }).catch(error => {
            console.log('登录失败:', error)
            if (error.response && error.response.status === 403) {
              this.$message.error('请使用正确的登录入口')
            } else {
              this.$message.error('登录失败，请检查用户名和密码')
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
  
  .login-box {
    width: 900px;
    height: 500px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    overflow: hidden;
    
    .login-left {
      width: 50%;
      background: linear-gradient(135deg, #42b0ff, #4262ff);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      padding: 40px;
      
      .welcome-text {
        h1 {
          font-size: 32px;
          margin: 10px 0;
        }
        
        h2 {
          font-size: 24px;
          font-weight: normal;
        }
        
        p {
          margin-top: 20px;
          opacity: 0.8;
        }
      }
    }
    
    .login-right {
      width: 50%;
      background-color: white;
      padding: 40px;
      display: flex;
      align-items: center;
      
      .login-form-container {
        width: 100%;
        
        h2 {
          font-size: 24px;
          color: #333;
          margin-bottom: 10px;
        }
        
        .sub-title {
          color: #999;
          margin-bottom: 30px;
        }
        
        .login-form {
          .role-selector {
            margin-bottom: 10px;
          }
          
          .role-tip {
            margin-bottom: 15px;
          }
          
          .login-button {
            width: 100%;
            height: 40px;
            border-radius: 20px;
            font-size: 16px;
          }
          
          .login-tips {
            text-align: center;
            margin-top: 20px;
            color: #999;
            
            a {
              color: #4262ff;
              text-decoration: none;
              
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}
</style> 